<template>
	<section class="header_container">
		<el-row>
			<el-col :span="24" class="header">
                <div class="logo" style="text-align: left;font-weight: 400;font-size: 14px;width:200px;font-weight: bold;">
					<img src="../../imgs/index/home-left-logo-img1.png">
					<span style="font-style:italic;color:#94C6F6;font-size: 18px;">总部</span>
                    <span style="font-style:italic;color:#8FCD4E;margin-left:-3px;font-size: 18px;">系统</span>
                </div>
                <div class="serch" style="display: inline-block;width:50%;padding-left:20px;min-width:700px;">
                    <!-- <el-input
                            placeholder="搜索影院(名称/专资编号)"
                            class="searchInput"
                            style="width:300px;"
                            height="50px"
                            size="medium"
                            v-model="searchKey"> -->
                             <el-input
                            placeholder="搜索影院(名称/专资编号)"
                            height="50px"
                            size="medium"
                            v-model="searchKey"  class="searchInput input-with-select">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                         <el-button slot="append" icon="el-icon-search" @click="handeButton(searchKey)"></el-button>
                    </el-input>
                    <!-- <span style="float:right;">{{nowDate}}，  欢迎您使用影院总部管理系统。</span> -->
                </div>
				<div class="userinfo">
                    <div class="userTitle lt">
                        <span>{{nowDate}}</span>
                    </div>
                    <div class="userTitle lt">
                        <i class="iconfont icontop-yonghu" style="font-size:16px;"></i>
                        <span>你好，{{sysUserName}}</span>
                    </div> 
                     <div class="userTitle lt" @click="editPwd()">
                        <span class="iconfont icontop-quit"></span>
                                        <span>修改密码</span>
                    </div>
                    <div class="logoutTitle lt" @click="logout()">
                         <span class="iconfont icontop-quit"></span>
                                        <span>退出</span>
                        <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                            <el-submenu index="1">
                                <template slot="title">
                                </template>
                                <el-menu-item index="2-1">
                                    <li  @click="logout()">
                                        <span class="iconfont icontop-quit"></span>
                                        <span>退出</span>
                                    </li>
                                </el-menu-item>
                                <el-menu-item index="2-2">
                                    <li @click="editPwd()">
                                        <span class="iconfont icontop-quit"></span>
                                        <span>修改密码</span>
                                    </li>
                                </el-menu-item>
                            </el-submenu>
                        </el-menu> -->
                    </div>
				</div>
			</el-col>
		</el-row>
        <editPassWord :setPasswordVisible.sync="setPasswordVisible" ref="Cinemadetails"></editPassWord>
	</section>
</template>
<script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component'
    import Service from './headTop.service';
    import { State,Mutation } from 'vuex-class';
    import moment from 'moment'
    import editPassWord from '@/views/login/setPasswordDialog.vue'
    @Component({
        components:{
            editPassWord,
        }
        }
    )
	export default class appHead extends Vue {
        sysUserName = '';
        searchKey = '';
        nowDate = '';
        requireOA:boolean;
        setPasswordVisible:boolean=true;
        constructor() {
            super();
          this.requireOA=false;
        };

        //退出登录
        logout() {
            let _this = this;
            this['$confirm']('确认退出吗?', '退出登录', {
                iconClass: 'askInformation'
            }).then(() => {
                Service.logout({}).then((res) => {
                    if (res.data.succeeded) {
                        localStorage.clear();
                        sessionStorage.clear();
                        _this['$router'].push('/login/Login');
                        this.$router.options.routes[0].meta.requireAuth = true;
                    }
                });

            }).catch(() => {

            });
        };
        
        getNowDate(){
            let date = new Date();
            let day = moment(date).format('d');
            let strDay = '';
            switch(day){
                case '1':
                    strDay = '一';
                    break;
                case '2':
                    strDay = '二';
                    break;
                case '3':
                    strDay = '三';
                    break;
                case '4':
                    strDay = '四';
                    break;
                case '5':
                    strDay = '五';
                    break;
                case '6':
                    strDay = '六';
                    break;
                case '7':
                    strDay = '日';
                    break;
            }
            this.nowDate = moment(date).format("YYYY年MM月DD日 星期")+strDay;
        }

        editPwd() {
            this.requireOA = !this.requireOA;
            this.setPasswordVisible = true;
            this.$refs.Cinemadetails.setPasswordVisible = true
            console.log(this.$refs.Cinemadetails.setPasswordVisible)
        }
        handeButton(row) {
            window.sessionStorage.setItem('rowName',row)
            this.$router.push({
                path: '/cinema/cinemaList',
                name: '影院信息',
            })
        }
        mounted() {
            this.getNowDate();
        };

        created() {
            const me = this;
            this.sysUserName = localStorage.getItem('LogonUserName');
        };

    }
</script>

<style lang="scss" scoped>
	@import '../../styles/header.scss';

</style>
<style lang="scss" scoped>
    @media only screen and (max-width : 1280px) {
        .serch {
            width: 40% !important;
            min-width: auto !important;
        }
        .header_container .userinfo .userTitle[data-v-ecbdb194], .header_container .userinfo .logoutTitle[data-v-ecbdb194] {
            font-size: .5rem !important;
        }
    }
    @media only screen and (max-width : 1024px) {
        .serch {
            width: 30% !important;
            min-width: auto !important;
        }
        .header_container .userinfo .userTitle[data-v-ecbdb194], .header_container .userinfo .logoutTitle[data-v-ecbdb194] {
            font-size: .5rem !important;
        }
    }
    
</style>